import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:pull_to_refresh/pull_to_refresh.dart';
import 'package:xin_he/page/home/model/xin_he_goods_item_entity.dart';
import 'package:xin_he/page/home/model/xin_he_special_distract_entity.dart';
import 'package:xin_he/utils/xh_styles.dart';
import 'package:xin_he/utils/xin_he_image.dart';

import '../../../routes/xin_he_routes.dart';
import '../../shopping_car/models/xin_he_goods_model.dart';
import 'xin_he_category_logic.dart';

class XinHeCategoryPage extends StatelessWidget {
  XinHeCategoryPage({Key? key, this.tag}) : super(key: key);
 final String? tag;

  final logic = Get.put(XinHeCategoryLogic());
  final state = Get.find<XinHeCategoryLogic>().state;

  @override
  Widget build(BuildContext context) {
    if(tag != null){
      var tabIndex = Get.arguments;
      if(tabIndex !=null){
        logic.selectIndex.value = tabIndex;
        logic.changeIndex(tabIndex, '');
      }
    }
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.white,
        shadowColor: Colors.transparent,
        leading: tag != null? IconButton(
            onPressed: (){
              Get.back();
            },
            icon: Container(
              padding: const EdgeInsets.only(left: 7),
              alignment: Alignment.centerLeft,
              child: const XinHeAssetImage(
                'assets/images/home/app_back_3.png',
                width: 9.5,
                height: 17,
                fit: BoxFit.cover,),
            )
        ):Container(),
        title: Text('分类',style: TextStyle(color:XinHeColor('##222222'),fontSize: 17,fontWeight: FontWeight.w600)),
        centerTitle: true,
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [

          ///search
           Container(
             padding: EdgeInsets.only(left: 15,right: 15,top: 10,bottom: 12),
             height: 35+22,
             color: Colors.white,
             child: GestureDetector(
               onTap: (){
                 Get.toNamed(XinHeRoutes.search);
               },
               child: Container(
                 width: Get.width - 30,
                 decoration: BoxDecoration(color: XinHeColor('#F0F7F8'),borderRadius: BorderRadius.circular(17.5)),
                 alignment: Alignment.center,
                 child: Row(
                   mainAxisSize: MainAxisSize.min,
                   children: [
                     XinHeAssetImage('assets/images/home/search_12.png',width: 12,height: 12,fit: BoxFit.fill,),
                     SizedBox(width: 3,),
                     Text('请输入商品名',style: TextStyle(color: XinHeColor('#C3C3C3'),fontSize: 13),)
                 ],)
               ),
             ),

           ),

           Expanded(
             child: Row(children: [
               _leftListView(),
               _rightListView()
             ],),
           )


      ],),
    );
  }

  ///左侧分类列表
  Widget _leftListView() {
    return SizedBox(
      width: 96,
      child: Obx(
            () => Container(
          color: Colors.transparent,
          child: SmartRefresher(
            enablePullDown: false,
            controller: logic.refreshController,
            onRefresh: logic.onRefresh,
            // header: const WaterDropMaterialHeader(
            //   color: Colors.white,
            // ),
            child: ListView.separated(
                itemBuilder: (context, index){
                  XinHeSpecialDistractEntity model = state.allTabList[index];
              return Obx(
                    () => InkWell(
                  onTap: () {
                    logic.changeIndex(
                        index, model.name);
                  },
                  child: Container(
                    // color:
                    // Colors.white, //若是为了设置背景色，也可以在listView外面再包一层container来设置
                    color: logic.selectIndex.value == index
                        ? Colors.white
                        : Colors.transparent,
                    height: 40,
                    child: Stack(
                      alignment: Alignment.centerLeft,
                      children: [
                        Container(
                          width: 2,
                          height: 16,
                          color: logic.selectIndex.value == index
                              ? XinHeStyle.mainGreenColor
                              : Colors.transparent,
                        ),
                        Padding(
                          padding:
                          const EdgeInsets.only(left: 20),
                          child: Text(
                            model.name,
                            softWrap: false,
                            style: TextStyle(
                                color: logic.selectIndex.value == index?XinHeStyle.mainGreenColor:XinHeColor('#222222'),
                                fontWeight:
                                logic.selectIndex.value == index
                                    ? FontWeight.bold
                                    : FontWeight.normal),
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              );
            }, separatorBuilder: (ctx,index){
              return Container(height: 20,color: Colors.transparent,);
            }, itemCount: state.allTabList.length)
          ),
        ),
      ),
    );
  }

  ///右侧分类列表
  Widget _rightListView() {
    return Expanded(
        child: Obx(
              () => Container(
            color: Colors.white,
            child:
            state.allTabDataList.isNotEmpty? ListView.builder(
                itemCount: state.allTabDataList.length,
                itemBuilder: (ctx,index){
                  XinHeGoodsItemEntity model = state.allTabDataList[index];
                  return GestureDetector(
                    onTap: (){

                      Get.toNamed(XinHeRoutes.goodsDetail,arguments: model.id);

                    },
                    child: Stack(
                      children: [
                        Container(
                          color: Colors.white,
                          width: Get.width-96,
                          height: 120,
                          child:  Row(
                            children: [
                               Padding(
                                padding:  const EdgeInsets.only(left: 10,top: 15,right: 15,bottom: 15),
                                child: XinHeNetImage(url: model.iconPath??'',width: 90,height: 90,fit: BoxFit.fill,),
                              ),

                              Padding(
                                padding: const EdgeInsets.only(right: 15),
                                child: Column(
                                  mainAxisAlignment: MainAxisAlignment.center,
                                  children: [
                                    SizedBox(
                                        width:Get.width-96-10-15-90-15,
                                        child: Text(model.name??'',maxLines: 2,softWrap: true,style: TextStyle(color: XinHeColor('#222222'),fontSize: 14,fontWeight: FontWeight.bold),)
                                    ),
                                    const SizedBox(height: 16,),
                                    SizedBox(
                                      width: Get.width-96-10-15-90-15,
                                      child: Row(
                                        children: [

                                          RichText(
                                              text: TextSpan(children: [
                                                ///￥
                                                TextSpan(
                                                  text: '￥',
                                                  style: TextStyle(
                                                    color: XinHeColor('#E84128'),
                                                    fontSize: 9,
                                                    fontWeight: FontWeight.w500,
                                                  ),
                                                ),

                                                ///
                                                TextSpan(
                                                  text: '${model.price?? 0.00}',
                                                  style: TextStyle(
                                                    color: XinHeColor('#E84128'),
                                                    fontSize: 16,
                                                    fontWeight: FontWeight.w500,
                                                  ),
                                                ),

                                              ]
                                              )),
                                          Spacer(),
                                          // GestureDetector(
                                          //   onTap:(){
                                          //     logic.addGoodsToCartAction(XinHeGoodsModel());
                                          //   },
                                          //   child: const Padding(
                                          //     padding: EdgeInsets.only(left: 8),
                                          //     child: XinHeAssetImage('assets/images/home/add.png',width: 22,height: 22,),
                                          //   ),
                                          // ),

                                        ],
                                      ),
                                    )

                                  ],),
                              )


                            ],
                          ),
                        ),

                        Positioned(
                          bottom: 0,
                          right: 0,
                          child: Container(
                            width: Get.width-96-10-90-15,
                            color: XinHeColor('#E7EEEE'),
                            height: 0.5,),
                        )

                      ],
                    ),
                  );
                }
            ):Container(
                color: Colors.white,
                height: double.infinity,
                alignment: Alignment.center,
                child: const Text('暂无数据')),
          ),
        ));
  }
}
